<template>
    <!-- 注意：在vue2模板中一定要有根标签,vue三可以没有 -->
    <div class="home">
        <!-- 搜索框   属性="属性值"-->
        <van-search v-model="value" placeholder="请输入搜索关键词" shape='round' />
        <!-- 轮播图(采用组件抽离和父传子的方式)  自动轮播的间隔时长、指示器的颜色-->
        <mySwiper :bannerArr="bannerArr"></mySwiper>
        <!-- 导航  -->
        <Grid :channelArr="channelArr"></Grid>

    </div>
</template>

<script>
// 引入轮播图组件
import mySwiper from '@/components/SwiperCom.vue'
// 导入导航组件
import Grid from '@/components/GridCom.vue'

import Vue from 'vue';
import { Search, } from 'vant';
Vue.use(Search);  //要一个一个use，相当于注册全局组件
// 导入首页接口
import { getHomeData } from '../api/homeapi.js'

export default {
    name: 'homeView', //组件名，由于eslint语法要求，不写就会报错，要不报错就要进行根配置
    data() {
        return {
            value: '',  //关键字
            bannerArr: [], //轮播图数组
            channelArr:[] //导航组件

        };
    },
    // 注册组件components:{组件名}
    components: {
        mySwiper, Grid
    },
    mounted() {
        this.getHomeDataFn() //挂载处调用

    },
    methods: {
        // 使用async和await的语法
        async getHomeDataFn() {
            let res = await getHomeData();
            console.log(1, res);
            // 赋值
            this.bannerArr = res.data.banner;
            this.channelArr=res.data.channel

        }
    }


}

</script>

<style lang='less' scoped>

</style>
